<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交租管理</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="/dangxia/css/font.css">
    <link rel="stylesheet" href="/dangxia/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/dangxia/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/dangxia/js/xadmin.js"></script>

</head>
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body" id="usebar">
    <div class="layui-inline">
        <label class="layui-form-label">姓名：</label>
        <div class="layui-input-inline">
            <input type="text" value="" placeholder="请输入姓名" id="name"
                   class="layui-input search_input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">手机号：</label>
        <div class="layui-input-inline">
            <input type="text" value="" placeholder="请输入手机号" id="phone"
                   class="layui-input search_input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">房间号：</label>
        <div class="layui-input-inline">
            <input type="text" value="" placeholder="请输入房间号" id="roomNo"
                   class="layui-input search_input">
        </div>
    </div>
    <div class="layui-input-inline">
        <a class="layui-btn search_btn" id="selectpayment">查询</a>
    </div>
    <div class="layui-input-inline" style="float:right">
        <a class="layui-btn"  id="payhistory"><i class="layui-icon">&#xe66e;</i>缴费记录</a>
    </div>
    <table id="rooms" lay-filter="test"></table>
</div>

<script type="text/html" id="userSexTpl">
 {{#if(d.userSex==0){ }}
    女
 {{# }else{  }}
    男
{{# } }}

</script>
<script type="text/html" id="paymentTpl">
    {{# var a = Number(d.mytime)}}
    {{#if(a>0&&a<=7){ }}
        <button class="layui-btn layui-btn-sm layui-btn-warm">到期警告</button><span> 剩余{{= a }}天</span>
    {{# }else if(a<0){ }}
        <button class="laui-btn layui-btn-sm layui-btn-danger">逾期警告</button><span>逾期{{= -a }}天</span>
   {{# }else if(a==0){ }}
        <button class="layui-btn layui-btn-sm layui-btn-danger">已经到期</button>
     {{#  }else{ }}
        <button class="layui-btn layui-btn-sm layui-btn-normal">正常</button>
       {{# } }}
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="edit">交租</a>
</script>
<script>
    layui.use(['table', 'layer', 'laytpl', 'form','laydate'], function () {
        var table = layui.table;
        var laytpl = layui.laytpl;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;

        //第一个实例
        table.render({
            elem: '#rooms'
            ,toolbar: '#toolbarDemo'
            , height: 412
            , id: 'idTest'
            , url: '/dangxia/payment/getAllMsg' //数据接口
            , page: true //开启分页
            , limits: [5, 10, 15, 20]
            , limit: 5
            , cols: [
                [ //表头
                    {field: 'name', title: '姓名', sort: true, fixed: 'left'}
                    , {field: 'phone', title: '手机号'}
                    , {field: 'userSex', title: '性别',templet: '#userSexTpl'}
                    , {field: 'roomNo', title: '房间'}
                    , {field: 'bedNum', title: '床号'}
                    , {field: 'endTime', title: '到期时间'}
                    , {field: '', title: '交租预警',templet: '#paymentTpl'}
                    , {field: '', title: '操作', fixed: 'right',toolbar: '#barDemo'}
                ]
            ],
            done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                $(".x-right").html("共有数据：" + count + "条");
            }

        });


        //模糊搜索  提交 点击事件 发送数据
        $(document).on('click', '#selectpayment', function () {
            var name = $("#name").val();
            var phone = $("#phone").val();
            var roomNo = $("#roomNo").val();
            table.reload('idTest', {
                url: '/dangxia/payment/getAllMsg',
                method: 'post',
                where: { //设定异步数据接口的额外参数，任意设
                    roomNo: roomNo,
                    phone: phone,
                    name:name
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });

        //交租弹框
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            $("#uid").val(data.id);
            $("#myendTime").val(data.endTime);
          if(layEvent === 'edit'){ //编辑
                //do something
              //交租弹出层
              layer.open({
                  title: "交租办理",
                  type: 1,
                  content: $('#mypayment'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                  area: ['400px', '400px'],
                  end: function () {
                      location.reload();
                  }
              });

              form.on('submit(demo1)', function(data){
                var addDate = data.field.addDate;
                var payment = data.field.payment;
                var uid = $("#uid").val();
                var endTime = $("#myendTime").val();
                $.post("/dangxia/payment/addDateForUser",{
                    addDate:addDate,
                    uid:uid,
                    endTime:endTime,
                    payment:payment
                },function (data) {
                    if(data.code==0) {
                        layer.msg(data.msg, {
                            time: 1000, icon: 6, end: function () {
                                layer.closeAll();
                            }
                        });
                    }else{
                        layer.msg(data.msg, {time: 1000, icon: 5});
                    }
                });
                  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
              });

            }
        });

        //历史记录弹框
        $(document).on("click",'#payhistory',function () {
            layer.open({
                title: "历史记录",
                type: 1,
                content: $('#myhistoryHH'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                area: ['800px', '500px'],
                end: function () {
                    location.reload();
                }
            });

            //第一个实例
            table.render({
                elem: '#myhistory'
                , height: 412
                , url: '/dangxia/payment/getAllHistory' //数据接口
                ,initSort: {
                    field: 'payDate' //排序字段，对应 cols 设定的各字段名
                    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
                , page: true //开启分页
                , limits: [5, 10, 20, 30]
                , limit: 5
                , cols: [
                    [ //表头
                        {field: 'name', title: '姓名', sort: true, fixed: 'left'}
                        , {field: 'phone', title: '手机号'}
                        , {field: 'monthNum', title: '续租月数'}
                        , {field: 'payment', title: '续租金额'}
                        , {field: 'endTime', title: '到期时间'}
                        , {field: 'createMan', title: '操作人'}
                        , {field: 'payDate', title: '操作时间',sort:true}
                    ]
                ]

            });

        });












    });
</script>
</body>

<div id="mypayment" style="display: none">
    <form class="layui-form layui-form-pane" action="">
        <div style="display: none">
            <input id="uid" name="uid">
            <input id="myendTime" name="endTime">
        </div>
    <div class="layui-form-item">
        <label class="layui-form-label">续租日期</label>
        <div class="layui-input-block">
            <select name="addDate" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">一个月</option>
                <option value="2">两个月</option>
                <option value="3">三个月</option>
                <option value="4">四个月</option>
                <option value="5">五个月</option>
                <option value="6">六个月</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">续租金额</label>
        <div class="layui-input-inline">
            <input type="text" name="payment" placeholder="请输入交租金额"
                   lay-verify="required|number" class="layui-input">
        </div>
    </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="mybtn" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
  </form>
</div>


<!--历史记录弹框内容-->
<div id="myhistoryHH" style="display: none">
    <table id="myhistory"></table>
</div>


</html>